<template>
  <view class="Allauthoriza">
    <u-navbar title="车友验证" :is-back="false" title-color="#333"></u-navbar>
    <view class="authoriza" v-if="userinfo">
      <view class="package" style="text-align: center;">{{text}}</view>
      <image :src="poster1" mode=""></image>
      <view class="phones">
        <view class="phones_tel">
          <text style="font-size: 30rpx">姓名</text>
          <input type="text" :placeholder="userinfo.realname ? userinfo.realname : '请输入您的真实姓名'" v-model="name"
            style="width: 80%" @input="fpNumInput" maxlength="3" />
        </view>
        <view class="phones_tel">
          <text style="font-size: 30rpx">手机号</text>
          <input type="number" :placeholder="userinfo.mobile ? userinfo.mobile : '请输入手机号码'" maxlength="11"
            v-model="phone" style="width: 80%" />
        </view>
        <view class="phones_tel" v-if="!userinfo.mobile">
          <text style="font-size: 30rpx">验证码</text>
          <view class="phones_code">
            <input v-model="code" style="width: 50%" placeholder="请输入验证码" type="number" maxlength="4" />
            <view class="_code" @click="handleCodeClick('100')">{{ textArea }}</view>
          </view>
        </view>
      </view>
      <view class="phone_bottom">
        <view class="" @click="submit()">接受</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { getDriverID } from '@/stores/driverID';
  import { showToast, successToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { nextTick, onMounted, ref } from 'vue';
  import { useUserStore } from '@/stores/user';
  import { poster1 } from '@/utils/Static';
  import { decrypt } from '@/utils/jsencrypt';
  const driver_id = getDriverID();
  const name = ref(''); //用户姓名
  const phone = ref('');
  const code = ref('');
  const textArea = ref('验证码');
  const btnBool = ref(true); //放重复点击

  const Rebind = ref(false);
  const relNmae = ref(false);

  const text = ref('');

  const userinfo = useUserStore();
  const repeat = ref(true); //放重复点击
  const all = ref()
  onMounted(() => {
    const loct = uni.getStorageSync('StoreData')
    all.value = JSON.parse(decrypt(loct))
    text.value = all.value.name
    userInfor();
  });
  /**
   * 获取用户信息
   */
  function userInfor() {
    if (
      (all.value.customers_id && userinfo.customers_text) ||
      (all.value.union_id && userinfo.union_text)
    ) {
      relNmae.value = true;
    }
    if (
      (userinfo.union_text && userinfo.union_text != text && text) ||
      (userinfo.customers_text && userinfo.customers_text != text && text)
    ) {
      Rebind.value = true;
    }
  }
  /**
   * 正则输入的数据
   */
  function fpNumInput(e) {
    const { detail } = e;
    const inputRule = /[^\u4E00-\u9FA5]/g; ///只能输入中文
    const value = detail.value.replace(inputRule, '');
    nextTick(() => {
      name.value = value;
    });
  }
  /**
   * 正则手机号码
   */
  function phoneTel() {
    const mobile = /^1[3-9]\d{9}$/;
    const userPhone = userinfo && userinfo.mobile ? userinfo.mobile : phone.value;
    return mobile.test(userPhone);
  }
  /**
   * 发送验证码
   */
  function handleCodeClick() {
    if (!phone.value) {
      showToast('手机号不能为空');
      return;
    } else if (!phoneTel()) {
      showToast('请输入正确的手机号码');
      return;
    }
    if (btnBool.value) {
      btnBool.value = false;
      const payload = {
        event: 'notice',
        mobile: phone.value,
      };
      toPublish('driver/sendSms', payload, (obj : any) => {
        console.log(obj);
      });
      successToast('发送成功');
      let i = 60;
      let timer = setInterval(() => {
        textArea.value = +i + 's';
        i--;
        if (i < 0) {
          btnBool.value = true;
          textArea.value = '验证码';
          clearInterval(timer);
        }
      }, 1000);
    } else {
      return;
    }
  }

  /**
   * 判断提交授权
   */
  function submit() {
    const mobile = phone.value ? phone.value : userinfo.mobile;
    const real_name = name.value ? name.value : userinfo.realname;
    if (!mobile || !real_name) {
      showToast('请将补全验证信息');
      return;
    } else if (!phoneTel()) {
      showToast('请输入正确的手机号码');
      return;
    }
    submit_s(mobile, real_name);
  }
  /**
   * 确认提交授权
   */
  function submit_s(mobile, real_name) {
    const union_id = all.value.union_id ? Number(all.value.union_id) : 0;
    const price_group_id = all.value.union_price_group_id ? Number(all.value.union_price_group_id) : 0;
    const customers_id = all.value.customers_id ? Number(all.value.customers_id) : 0;
    const payload = {
      driver_id,
      union_id: union_id,
      union_price_group_id: price_group_id,
      customers_id: customers_id,
      mobile: mobile,
      real_name: real_name,
      captcha: code.value,
    };
    showLoading();
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    toPublish('driver/addManystoreDriver', payload, (obj : any) => {
      const ref = obj;
      if (ref.code === 1) {
        successToast('绑定成功');
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/index/filling',
          });
        }, 1500);
      } else {
        repeat.value = true;
        showToast(ref.msg);
      }
    });
  }
</script>

<style lang="less">
  @import url('../login/less/customer.less');
</style>